<template>
  <div class="blog-item">
    <div class="title">
      <div class="user-info">
        <img
          class="user-avatar"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg98.nipic.com%2Ffile%2F20180904%2F24136541_130050230168_1.jpg&refer=http%3A%2F%2Fimg98.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645351089&t=11e55ac27ddc194d1b325fe2e66022a2"
          alt=""
        />
        <div class="user-name">河北共青团</div>
      </div>
      <div class="duration">一小时前</div>
    </div>
    <img
      class="cover"
      src="https://f10.baidu.com/it/u=1263300950,3969809693&fm=3004&app=3004&f=JPEG&fmt=auto&q=75&size=f1138_640"
      alt=""
    />
    <div class="desc">
      经查，徐立毅同志作为时任河南省委常委、郑州市委书记，在河南郑州“7·20”特大暴雨灾害中暴露出来的相关问题，负有重要领导责任，应予严肃问责。
    </div>
    <div class="views">5位朋友读过</div>
  </div>
</template>
<style lang="less" scoped>
.blog-item {
  margin: 10px;
  background-color: #fff;
  border-radius: 12px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    .user-info {
      display: flex;
      align-items: center;
      .user-name {
        color: rgb(29, 65, 77);
      }
      .user-avatar {
        width: 40px;
        height: 40px;
      }
    }
    .duration {
      font-size: 12px;
      color: #888;
    }
  }
  .cover {
    width: 100%;
    height: 150px;
  }
  .desc {
    font-size: 14px;
    color: #1f1f1f;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //行数
    -webkit-box-orient: vertical;
    box-sizing: border-box;
    margin: 10px;
  }
  .views {
    padding: 0 10px 10px 10px;
    font-size: 12px;
    color: #666;
  }
}
</style>